//获取学生的数据并渲染到表格中
async function renderStudent() {
    const { data: res } = await axios.get('/students')
    let arr = res.data.map(item => {
        return `<tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender === 0 ? '男' : '女'}</td>
        <td>第${item.group}组</td>
        <td>${item.hope_salary}</td>
        <td>${item.salary}</td>
        <td>${item.province}${item.city}${item.area}</td>
        <td>
          <a href="javascript:;" class="text-success mr-3"><i data-id="${item.id}" class="bi bi-pen"></i></a>
          <a href="javascript:;" class="text-danger"><i data-id="${item.id}" class="bi bi-trash"></i></a>
        </td>
      </tr>`
    })
    document.querySelector('tbody').innerHTML = arr.join('')
}
renderStudent();

//添加操作 ，准备模态框，省市县联动，

//bootstrap模态框
let addModal = new bootstrap.Modal(document.querySelector('#modal'));
// addModal.show()//让模态框显示
// addModal.hide()//让模态框关闭

document.querySelector('#openModal').addEventListener('click', function () {
    document.querySelector('#modal h5').innerHTML = '添加学员'
    document.querySelector('#form').reset()
    addModal.show();
});
//省市县联动
async function initCity() {
    let province = document.querySelector('[name=province]')
    let city = document.querySelector('[name=city]')
    let area = document.querySelector('[name=area]')
    // 1.页面刷新，渲染到第1个下拉框
    const { data: res } = await axios.get('/api/province');
    let arr = res.data.map(item => `<option value="${item}">${item}</option>`);
    province.innerHTML = `<option value="">--省份--</option>` + arr.join('');
    //2.切换省的时候，获取对应的市
    province.addEventListener('change', async function () {
        area.innerHTML = `<option value="">--地区--</option>`;
        let pname = province.value;
        if (pname === '') {
            return (city.innerHTML = `<option value="">--城市--</option>`)
        }
        const { data: res } = await axios.get('/api/city', { params: { pname } })
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`);
        city.innerHTML = `<option value="">--城市--</option>` + arr.join('');
    })

    city.addEventListener('change', async function () {
        let pname = province.value;
        let cname = city.value;
        if (city === '') {
            return (area.innerHTML = `<option value="">--地区--</option>`)
        }
        const { data: res } = await axios.get('/api/area', { params: { pname, cname } })
        let arr = res.data.map(item => `<option value="${item}">${item}</option>`);
        area.innerHTML = `<option value="">--地区--</option>` + arr.join('');
    })

}
initCity()

document.querySelector('#submit').addEventListener('click', async function (e) {
    e.preventDefault();
    let data = val(document.querySelector('#form'));
    //把数字类型的值转换一下
    data.age = Number(data.age);
    data.gender = +data.gender;//+必须和后面的值连接在一起
    data.group = +data.group;
    data.hope_salary = +data.hope_salary;
    data.salary = +data.salary;

    //判断点击的是添加还是修改
    let title = document.querySelector('#modal h5').innerHTML
    if (title === '添加学员') {
        try {
            const { data: res } = await axios.post('/students', data);
            message.success(res.message)//使用插件提示
            renderStudent()//重新获取页面数据，重新渲染
            addModal.hide()//关闭动态框
        } catch (e) {
            message.error('添加失败')
        }
    } else if (title === '修改学员') {
        try {
            let id = document.querySelector('#modal h5').dataset.id
            const { data: res } = await axios.put(`/students/${id}`, data);
            message.success(res.message)//使用插件提示
            renderStudent()//重新获取页面数据，重新渲染
            addModal.hide()//关闭动态框
        } catch (e) {
            message.error('修改失败')
        }
    }
    //


});

// 删除操作
document.querySelector('tbody').addEventListener('click', async function (e) {
    //判断，点击的是否是删除
    if (e.target.classList.contains('bi-trash')) {
        let id = e.target.dataset.id;
        //对于敏感操作，必须加提示
        if (!confirm('确定要删除吗')) return
        // message.confirm('提示', '你确定不要我了吗？', async () => {
        //     try...
        // })
        try {
            const { data: res } = await axios.delete(`/students/${id}`)
            message.success('删除成功')
            renderStudent()
        } catch (e) {
            message.error('删除失败')
        }

    }
    //判断，点击的是否是编辑
    if (e.target.classList.contains('bi-pen')) {
        let id = e.target.dataset.id;

        //修改模态框的标题
        document.querySelector('#modal h5').innerHTML = '修改学员'
        document.querySelector('#modal h5').setAttribute('data-id', id)//向这个标签中添加自定义属性值
        addModal.show()//点击编辑的时候，出现模态框
        //数据回填 -- 首先得到数据，根据id发送请求获取数据
        const { data: res } = await axios.get(`/students/${id}`);
        // console.log(res);
        //在数据回填之前，应该把市，县取出
        let p1 = axios.get('/api/city', { params: { pname: res.data.province } })
        let p2 = axios.get('/api/area', { params: { pname: res.data.province, cname: res.data.city } })
        // const result = await Promise.all([p1, p2])
        const [{ data: { data: c } }, { data: { data: a } }] = await Promise.all([p1, p2]);
        let arr2 = c.map(item => `<option value="${item}">${item}</option>`);
        document.querySelector('[name=city]').innerHTML = `<option value="">--城市--</option>` + arr2.join('')

        let arr3 = a.map(item => `<option value="${item}">${item}</option>`);
        document.querySelector('[name=area]').innerHTML = `<option value="">--地区--</option>` + arr3.join('')
        val(document.querySelector('#form'), res.data)//传递两个参数，表示数据回填
    }
})